<template>
    <div class="search" :class='{ focused: isFocused }'>
        <div class="input-box">
            <input @confirm='goList' v-model="kyeword" @input="handleSearch" :placeholder='placeholder' type="text"
                @focus='handleFocuc' />
            <text class="canccel" @click='handleCancel'>取消</text>
        </div>
        <!-- 搜索结果 -->
        <div class="content">
            <div class="title">
                搜索历史
                <span class="clear" @click="clearCache"></span>
            </div>
            <div class="history">
                <navigator :url="'/pages/list/index?kw=' + item" v-for="(item, index) in history"
                 :key="index">
                 {{ item }}
                </navigator>
            </div>
            <!-- 结果 -->
            <scroll-view scroll-y class="result" v-show="kyeword">
                <navigator url='' :key='goods_id' v-for='item in result'>{{ item.goods_name }}</navigator>
            </scroll-view>
        </div>
    </div>
</template>
<script>
import { Getqsearch } from '@/api/logo.js'; // 引入api
export default {
    data() {
        return {
            titile: 'Search',
            isFocused: false,
            placeholder: '',
            kyeword: '',
            // 关键字搜索结果
            result: [],
            // 历史关键字列表
            history: uni.getStorageSync('history') || [],
            // 定时任务
            timer:null,
        }
    },
    onLoad() {

    },

    methods: {
        // 清除缓存
        clearCache() {
            uni.removeStorageSync('history')
            this.history = []
        },
        goList() {
            this.history.unshift(this.kyeword)
            this.history = [...new Set(this.history)]
            uni.setStorageSync('history', this.history)
            // 跳转到商品列表页面
            uni.navigateTo({
                url:`/pages/list/index?kw=` + this.kyeword 
            })
        },
        // input
         handleSearch() {
            if (!this.kyeword) return
            // 根据关键字查询
            clearTimeout(this.timer)
            this.timer = setTimeout(async() => {
                const res = await Getqsearch(this.kyeword)
                console.log(res);
                if (res.meta.status === 200) {
                    this.result = res.message
                } else {
                    uni.showToast(res.meta.msg)
                }
            },1000)
        },
        handleFocuc() {
            console.log(111)
            // 控制状态位，进而影响搜索栏
            this.isFocused = true
            this.placeholder = '请输入想要的商品'
            // 编程可用的高度
            let height = uni.getSystemInfoSync().windowHeight
            // 把高度传递父组件
            this.$emit('get-height', height)
        },
        handleCancel() {
            this.isFocused = false
            this.placeholder = ''
            this.kyeword = ''
        }
    }
}
</script>
<style lang='less'>
.search {
    .content {
        position: absolute;
        top: 100rpx;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
        display: none;
        background-color: #fff;
        padding: 30rpx;

        .title {
            font-size: 27rpx;
            line-height: 1;
            color: #333;
        }

        .clear {
            display: block;
            width: 27rpx;
            height: 27rpx;
            float: right;
            background-image: url(http://static.botue.com/ugo/images/clear.png);
            background-size: cover;
        }

        .history {
            padding-top: 30rpx;

            navigator {
                display: inline-block;
                line-height: 1;
                padding: 15rpx 20rpx 12rpx;
                background-color: #ddd;
                font-size: 24rpx;
                margin-right: 20rpx;
                margin-bottom: 15rpx;
                color: #333;
            }
        }

        .result {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #fff;

            navigator {
                line-height: 1;
                padding: 20rpx 30rpx;
                font-size: 24rpx;
                color: #666;
                border-bottom: 1px solid #eee;

                &:last-child {
                    border-bottom: none;
                }
            }
        }
    }

    .input-box {
        background-color: #EB4450;
        padding: 20rpx 16rpx;
        display: flex;
        position: relative;

        input {
            background-color: #fff;
            flex: 1;
            height: 60rpx;
            line-height: 60rpx;
            padding-left: 49rpx;
        }

        .canccel {
            display: none;
        }

        &::before {
            content: '';
            display: none;
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            top: 50%;
            transform: translate(15rpx, -50%);
            background-image: url('http://static.botue.com/ugo/images/icon_search%402x.png');
            background-size: 32rpx;
        }

        &::after {
            content: '搜索';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24rpx;
            color: #ccc;
            // 样式的背景不能用本地图片
            background-image: url('http://static.botue.com/ugo/images/icon_search%402x.png');
            background-size: 32rpx;
            background-repeat: no-repeat;
            padding-left: 40rpx;
        }
    }

    &.focused {
        .content {
            display: block;
        }

        .input-box {
            background-color: #eee;

            &::before {
                display: block;
            }

            &::after {
                display: none;
            }
        }

        .canccel {
            display: block;
            width: 100rpx;
            height: 50rpx;
            line-height: 50rpx;
            text-align: center;
            font-size: 30rpx;
        }

    }
}
</style>